<link type="text/css" href="/css/ui-lightness/jquery-ui-1.8.7.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/flowplayer-3.2.4.min.js"></script>
<?php use_stylesheets_for_form($form) ?>
<script type="text/javascript" src="/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablednd_0_5.js"></script>
<?php use_javascripts_for_form($form) ?>


<div class="sf_admin_form">
<?php echo form_tag_for($form, '@video_group') ?>
    <?php include_partial('videoGroup/form_actions', array('video_group' => $video_group, 'form' => $form, 'configuration' => $configuration, 'helper' => $helper)) ?>
<?php echo $form->renderHiddenFields(false) ?>

<?php if ($form->hasGlobalErrors()): ?>
<?php echo $form->renderGlobalErrors() ?>
<?php endif; ?>

    <script type="text/javascript">
        $(document).ready(function() {
            // Initialise the table
            $("#videoGroupTable").tableDnD();
        });

        $(function() {
            // 视频播放窗口
            $('#playerDialog').dialog({
                autoOpen: false,
                width: 600,
                height: 400,
                buttons: {
                    "OK": function() {
                        $(this).dialog("close");
                    }
                }
            });
            //视频列表窗口
            $('#videoListDialog').dialog({
                autoOpen: false,
                width: 800,
                height: 600,
                buttons: {
                    "OK": function() {
                        $("input[name='videoIds[]']").each(function(e) {
                            if ($(this).attr("checked") == true) {
                                var videoId = this.value;
                                var title = $("#video_list_td_" + this.value + "_title").text();
                                var snapShot = $("#video_list_td_" + this.value + "_title").text();
                                var artist = $("#video_list_td_" + this.value + "_artist").text();
                                var link = $("#video_list_" + this.value + "_link").val();
                                var publishTime = $("#video_list_td_" + this.value + "_publishTime").text();

                                //                                alert(link);
                                $('#videoGroupTable')
                                        .last()
                                        .append("<tr id='videoGroup_video_" + videoId + "'><td>" + videoId +
                                        "<input type='hidden' name='groupVideoIds[]' value='" + videoId + "' /> </td><td>" +
                                        "</td><td>" + title +
                                        "</td><td>" + artist +
                                        "</td><td>" + publishTime +
                                        "</td><td><a role='button' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' onclick=showVideoPreView('" + link + "') >" +
                                        "<span class='ui-button-text'>预览</span></a>" +
                                        "<a role='button' id='removeVideo'class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' onclick=removeVideoFromGroup('" + videoId + "') >" +
                                        "<span class='ui-button-text'>移除</span> </a></tr>");
                            }
                        })
                        //                        $('#videoGroupTable').last().append("<tr><td>视频ID</td><td>视频ID</td><td>视频ID</td><td>视频ID</td><td>视频ID</td><td>视频ID</td></tr>");
                        $(this).dialog("close");
                    }
                }
            });
            $('#addVideoBtn').click(
                    function() {
                        $("#videoListDialog").dialog('open');
                    }
                    );

        })

        function removeVideoFromGroup(videoId) {
            $("#videoGroup_video_" + videoId).remove();
        }

        function onTabClick(tabId) {
            switch (tabId) {
                case "BaseInfo" :
                    $("#BaseInfo").addClass("tabOn");
                    $("#VideoList").removeClass("tabOn");
                    $("#divBaseInfo").css("display", "block");
                    $("#divVideoList").css("display", "none");
                    break;
                case "VideoList":
                    $("#BaseInfo").removeClass("tabOn");
                    $("#VideoList").addClass("tabOn");
                    $("#divBaseInfo").css("display", "none");
                    $("#divVideoList").css("display", "block");
                    break;
            }
        }
    </script>


    <tr height="25px">
        <td style="padding-left:10px">
            <table style="height: 22px;" cellSpacing="0" cellPadding="0" border="0">
                <tr valign="bottom">
                    <td vAlign="bottom" style="FONT-SIZE: 9pt">
                        <span class="tab tabOn" tabIndex="0" id="BaseInfo" tabID="tab0"
                              onclick="onTabClick('BaseInfo')">视频组基本信息</span>
                        <span class="tab" tabIndex="1" tabID="tab2" id="VideoList"
                              onclick="onTabClick('VideoList')">视频列表</span></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="padding-left:5px">

            <!--            视频组基本信息-->
            <div class="tab" id="divBaseInfo">
            <?php foreach ($configuration->getFormFields($form, $form->isNew() ? 'new' : 'edit') as $fieldset => $fields): ?>
            <?php include_partial('videoGroup/form_fieldset', array('video_group' => $video_group, 'form' => $form, 'fields' => $fields, 'fieldset' => $fieldset)) ?>
            <?php endforeach; ?>
            </div>

            <!--            视频组视频列表-->
            <div class="tab" id="divVideoList" style="display:none;">

                <div id="playerDialog" title="视频预览">
                </div>
                <a role="button" id="addVideoBtn"
                   class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
                   href="#">
                    <span class="ui-button-text">添加视频</span>
                </a>


                <!--  视频组视频-->
                <table id="videoGroupTable" width="805" border="1">

                    <tr class="nodrop nodrag">
                        <th>视频ID</th>
                        <th>缩略图</th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                <?php foreach ($group_videos as $video) { ?>
                    <tr id="videoGroup_video_<?php echo $video->getVideoId(); ?>">
                        <td><?php echo $video->getVideoId(); ?>
                            <input type="hidden" name="groupVideoIds[]" value="<?php echo $video->getVideoId(); ?>">
                        </td>
                        <td><?php echo $video->getSnapshotSmall();?></td>
                        <td><?php echo $video->getTitle();?></td>
                        <td><?php echo $video->getArtist();?></td>
                        <td><?php echo $video->getPublishTime();?></td>
                        <td>
                            <a role="button"
                               class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
                               onclick="showVideoPreView('<?php echo $video->getLink(); ?>');">
                                <span class="ui-button-text">预览</span>
                            </a>


                            <a role="button" id="removeVideo"
                               class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
                               onclick="removeVideoFromGroup('<?php echo $video->getVideoId(); ?>');">
                                <span class="ui-button-text">移除</span>
                            </a>
                        </td>
                    </tr>
                <?php }?>
                </table>
            </div>
        </td>
    </tr>
<?php include_partial('videoGroup/form_actions', array('video_group' => $video_group, 'form' => $form, 'configuration' => $configuration, 'helper' => $helper)) ?>
    </form>
</div>


<div id="videoListDialog" title="视频列表">
    <form id="videoListForm"
          action="<?php echo url_for('videoGroup/addSelectedVideosToGroup') ?>"
          method="post">
        <input type="hidden" id="video_group_id" name="video_group_id"
               value="<?php echo $video_group->getVideoGroupId() ?>"/>
    <?php include_partial("videoGroup/video_list", array('videos' => $videos)) ?>
    </form>
</div>

<script type="text/javascript">
    function showVideoPreView(videoUrl) {
        $("#playerDialog").dialog('open');
        flowplayer('playerDialog', '/js/flowplayer-3.2.5.swf', videoUrl);
    }
</script>